<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <title>首页</title>

    <style>
        /* 设置尺寸 */
        /* *{
            background: url("image/background.jpg");
        } */
        .header{
            width: 1000px;
            height: 30px;
            /* position:  absolute;
            left: 200px;
            display: flex;
            justify-content: space-between; */

        }

        .search {
            width: 200px;
            height: 30px;
            border-radius: 18px;
            outline: none;
            background-color: white;

            border: 1px solid #ccc;
            padding-left: 20px;
            right:400px;
            top: 10px;
            position: absolute;
        }

        .btn {
            height: 30px;
            width: 30px;
            position: absolute;
            background: url("../image/search.png") no-repeat ;
            top: 16px;
            right: 405px;
            border: none;
            outline: none;
            cursor: pointer;
        }

        span{
            float: left;
        }

        .login{
            width: 200px;
            height: 30px;
            top: 16px;
            right: 100px;
            position: absolute;
        }

        dd>button{
            background-color: black;
            color: white;
            /*display: none;*/
        }
        /*dt>button:hover{*/
        /*    background-color: lavender;*/
        /*}*/

        #content-pane{
            height: 680px;
            width: 1300px;
            position: absolute;
            top: 60px;
            left: 145px;
        }
        a{
            text-decoration: none;
        }
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            font-style: inherit;
            width: 170px;
            height: 700px;
            position: absolute;
            top: 80px;
        }

        .el-main{
            width: 800px;
            height: 600px;
            background-color:gray;
            position: absolute;
            top: 75px;
            left: 180px;
        }
        .secondary{
            display: block;
            width: 60px;
            height: 20px;
        }

    </style>

</head>
<body>
<div class="header">
    <span> <img src="../image/logo.png">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span style="font-size:30px ;">智&nbsp;&nbsp;慧&nbsp;&nbsp;云&nbsp;&nbsp;课&nbsp;&nbsp;堂</span>

</div>

<div class="header">

    <form action="" class="parent">

        <input type="text" class="search" placeholder="搜索">

        <input type="button"  name="" id="" class="btn">

    </form>
</div>

<div class="login">
    <span><a href="" target="_blank">设置|</a></span>
    <span><a href="" target="_blank">登录|</a></span>
    <span><a href="" target="_blank">注册</a></span>

    <span><img src=""></span>
</div>
<div id="app" class="w3-sidebar w3-bar-block w3-black w3-card">
    <el-container>
        <el-aside >
            <el-menu router default-active="3-1" :default-openeds="['3']">
                <el-submenu v-for="menu in routers" :index="menu.path">
                    <template slot="title">
                        <a :href="menu.path" target="right" style="color: black">{{menu.title}}</a>
                    </template>
                    <template v-for="child in menu.children">
                        <el-menu-item :index="child.path">
                            <a :href="menu.path" target="right" style="color: black">{{child.title}}</a>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <iframe name="right" class="el-main" src="./mangerContent/home.html" frameborder="0"></iframe>
        </el-container>
    </el-container>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui/index.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
            routers:[
                {
                    path:'/home',
                    name: 'home',
                    title:"首页",
                    component:()=>import('../html/mangerContent/home.html'),
                    children: []
                },
                {
                    path:'/userManger',
                    name:'userManger',
                    title:"用户管理",
                    redirect:'feedBack/notProcessed',
                    component:()=>import('./mangerContent/studentManger'),
                    children: [
                        {
                            path:'/studentManger',
                            name:'studenterManger',
                            title: '学生管理',
                            component:()=>import('./mangerContent/studentManger'),
                            children: []
                        },
                        {
                            path:'/teacherMAnger',
                            name:'teacherManger',
                            title: '老师管理',
                            component:()=>import('./mangerContent/teacherManger'),
                            children: []
                        }
                    ]
                },
                {
                    path: '/feedBack',
                    name:'feedBack',
                    title:"反馈管理",
                    component:()=>import('./mangerContent/notProcessed'),
                    redirect:'feedBack/notProcessed',
                    children:[
                        {
                            path:'notProcessed',
                            name:'notProcessed',
                            title:"未处理",
                            component:()=>import('./mangerContent/notProcessed'),
                            children: []
                        },
                        {
                            path: 'processed',
                            name:'processed',
                            title:"已处理",
                            component:()=>import('./mangerContent/processed'),
                            children: [],
                        }
                    ]
                },
                {
                    path: '/recrousManger',
                    name:'recrousManger',
                    title:"资源管理",
                    component:()=>import('./mangerContent/videoManger'),
                    redirect:'/recrousManger/videoManger',
                    children:[
                        {
                            path:'videoManger',
                            name:'videoManger',
                            title:"视频管理",
                            component:()=>import('./mangerContent/videoManger'),
                            children: []
                        },
                        {
                            path: 'courseManger',
                            name: 'courseManger',
                            title: "课程管理",
                            component: () => import('./mangerContent/courseManger'),
                            children: [],
                        },
                        {
                            path: 'collectionManger',
                            name:'collectionManger',
                            title:"专辑管理",
                            component:()=>import('./mangerContent/collectionManger'),
                            children: [],
                        }
                    ]
                },
                {
                    path: '/InstructorRecruitment',
                    name:'InstructorRecruitment',
                    title:"讲师申请审核",
                    component:()=>import('./mangerContent/InstructorRecruitment'),
                    children: [],
                }
            ]
        },
        methods:{

        }
    });
    $(function() {
        var wd = 200;
        $(".el-main").css('width', $('body').width() - wd + 'px');
    });
</script>

</body>
</html>